<template>
  <div class="namelist">
    <div class="measure">
      <div class="measure-name">
        <div class="measure-namelist">
          <div :class="courselist === '1' ? 'tapelist' : 'tapelistname'" @click="course(1)">
            全部课程
          </div>
          <div :class="courselist === '2' ? 'tapelist' : 'tapelistname'" @click="course(2)">
            我的课程
          </div>
        </div>
        <div>
          <!-- <a-input class="inputwidth" placeholder="Please enter something">
            <template #prefix>
              <icon-search />
            </template> </a-input><span class="oval-search-button">搜索</span> -->
        </div>
      </div>
    </div>
    <!-- 全部课程 -->
    <div class="teplist" v-if="courselist === '1'">
      <div class="phone_wrap">
        <div>
          课程类型：
          <span v-for="(item, index) in spanItems" :key="index" class="spanlist"
            :class="{ active: currentActive === index + 1 }" @click="spanlistclick(index + 1)">
            {{ item }}
          </span>
        </div>
        <div class="knowledge">
          知识点:
          <a-space direction="vertical" size="large">
            <a-cascader :options="myObject" v-model="videodata.kid" :field-names="fieldNames" default-value="datunli"
              expand-trigger="hover" allow-clear :style="{ width: '320px' }" placeholder="请选择知识点"
              @change="searchButtonClick" />
          </a-space>
        </div>
        <div class="knowledge">
          关键字:
          <a-input :style="{ width: '220px', background: '#fff' }" placeholder="请输入课程关键词" v-model="keyword">
            <template #prefix>
              <icon-search />
            </template> </a-input><span class="oval-search-button" @click="searchButtonClick">搜索</span>
        </div>
      </div>


      <div class="namelisy-list">
        <div class="Loading" v-if="!videolistform">
          <a-spin dot />
        </div>
        <div class="namelisy" v-for="(item, index) in videolistform" :key="index">
          <img style="width: 100%; height: 178px" :src="item.CoverPath" alt="" />

          <a-tooltip :content="item.VideoName">
            <div class="testVideoName" style="padding: 0.5vw">
              {{ item.VideoName }}
            </div>
          </a-tooltip>

          <div class="namelisy-p">
            学习进度：
            <!-- item.OverRate item.OverRate-->
            {{
              (
                (Number(item.CurrentTime) / Number(item.VideoTime)) *
                100
              ).toFixed(0)
            }}%

          </div>
          <div class="namelisy-p">
            <a-progress :percent="(
              ((Number(item.CurrentTime) / Number(item.VideoTime)) * 100) /
              100
            ).toFixed(2)
              " size="large" :style="{ width: '80%' }" />
          </div>
          <div class="study">
            <!-- a-button  type="primary" -->
            <div class="measureBtn">
              <!-- <span>12人学过</span> -->
              <a-button type="primary" class="study-go" @click="videos(item, '1')">开始学习</a-button>
            </div>
          </div>
        </div>
      </div>
      <div v-if="videolistform" style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 24px;
          /* 假设父容器高度为视口高度 */
        ">
        <a-space direction="vertical" :size="16" style="display: block; text-align: center">
          <a-row>
            <a-col :span="24">
              <a-pagination v-if="windowwidth > 768" :total="totallist" show-total :current="videodata.page"
                :page-size="form.limit" @change="pageNumChangelist" />
              <a-pagination v-if="windowwidth <= 768" :total="totallist" :current="videodata.page" :page-size="form.limit"
                @change="pageNumChangelist" />
            </a-col>
          </a-row>
        </a-space>
      </div>
      <!-- </div> -->
    </div>
    <!-- 我的课程 -->
    <div class="teplist" v-if="courselist === '2'">
      <!-- <a-empty v-if="foemCourseList" class="empty" /> -->
      <div class="curriculum" v-for="(item, index) in foemCourseList" :key="index">
        <div class="curriclum-time">{{ item.AddTime }}</div>
        <div class="curriclum-time">
          <img src="/img/bianzu.png" style="width: 10px; height: 10px" alt="" />
          {{ item.CourseName }}
        </div>
        <a-button type="primary" class="start-learning" @click="videos(item, '2')">开始学习</a-button>
      </div>

      <div v-if="foemCourseList" style="
          display: flex;
          margin-top: 24px;
          justify-content: center;
          align-items: center;
          /* 假设父容器高度为视口高度 */
        ">
        <a-space direction="vertical" :size="16" style="display: block; text-align: center">
          <a-row>
            <a-col :span="24">
              <a-pagination :total="total" show-total :current="form.page" :page-size="form.limit"
                @change="pageNumChange" @page-size-change="pageSizeChange" />
            </a-col>
          </a-row>
        </a-space>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
  catgetCourseList,
  postcatZsd,
  catgetVideoList,
  getUserSubject,
} from "../../api/study";
import useUserStore from "@/store/modules/user";
import { Message } from "@arco-design/web-vue";
import { getPermission } from "@/utils/subject";
import { subject } from "@/utils/auth";
import { useRoute } from "vue-router";
const route = useRoute();
const userStore = useUserStore();
const router = useRouter();
const subjectID = userStore.$state.subjectID;
const spanItems = ["全部", "技巧课程", "基础课程"];
const currentActive = ref(1);
const myObject = ref();
const formdata = reactive({});
const courselist = ref("1");
const total = ref();
const Id = ref();
const foemCourseList = ref();
const totallist = ref();
const videolistform = ref();
const windowwidth = ref(window.innerWidth);
const form = reactive({
  page: 1,
  limit: 12,
  sid: subjectID,
});
const keyword = ref("");
const isMine = route.query.mine
debugger
if(isMine == "1"){
  courselist.value = "2"
}
keyword.value = route.query.keyword || "";
const videodata = reactive({
  gid: subjectID, //年级id
  sid: subjectID, //学科id
  type: route.query.type || "", //类型
  kid: route.query.kid || "", //知识点
  page: Number(route.query.page) || 1,
  keyword: route.query.keyword || ""
});
const fieldNames = { value: "KlID", label: "KlName" };


// 点击事件处理函数
const spanlistclick = (index: any) => {
  currentActive.value = index;
  // console.log(index, "?");
  if (index == 1) {
    videodata.type = "0";
    VideoList();
  } else if (index == 2) {
    videodata.type = "7";
    VideoList();
  } else if (index == 3) {
    videodata.type = "1"; //这个不对  同步课程
    VideoList();
  }
};

const videos = (e: any, index: any) => {
  if(e.CourseTypeID == 7){
    videodata.type = "7";
  }else{
    videodata.type = "1";
  }
  getUserSubject().then((res: any) => {
    subject(res.subjectIds);
    // localStorage.setItem('SUBJECT',JSON.stringify(subject) );Object.keys(res).length === 0 ? [] :
    if (!getPermission(userStore.$state.subjectID)) {
      // 替换为你的实际权限ID
      // 没有权限时显示提示
      Message.warning("您没有权限访问此内容，请联系管理员");
      return;
    }
    
    // 使用 query 传递对象
    if (index == 1) {
      router.push({
        path: "/Study/learningvideos",
        query: { VID: e.VID, kid: videodata.kid, id: 1, page: videodata.page, type: videodata.type, keyword: videodata.keyword },
      });
    } else {
      router.push({
        path: "/Study/learningvideos",
        query: { VID: e.CourseID, kid: videodata.kid, id: 2, page: videodata.page, type: videodata.type, keyword: videodata.keyword },
      });
    }
  });
};

// 全部课程
const course = (e: any) => {
  courselist.value = String(e);

  if (courselist.value == "1") {
    VideoList();
  } else {
    getCourseList();
  }
};

//我的课程列表
const getCourseList = () => {
  if (subjectID) form.sid = userStore.$state.subjectID;
  catgetCourseList(form).then((res: any) => {
    foemCourseList.value = res.list;
    total.value = res.count;
  });
};
// 课程中心
const VideoList = () => {
  if (subjectID) videodata.sid = userStore.$state.subjectID;
  const permission = JSON.parse(localStorage.getItem("permission") as any);
  videodata.gid = permission.GradeID;
  catgetVideoList(videodata).then((res: any) => {
    videolistform.value = res.data;

    totallist.value = res.count;
  });
};
// 分页切换
const pageNumChange = (page: number) => {
  if (page !== 0) {
    form.page = page;
    getCourseList();
  }
};
const pageNumChangelist = (page: number) => {
  if (page !== 0) {
    videodata.page = page;
    VideoList();
  }
};
const pageSizeChange = (pageSize: number) => {
  // form.page = 1;
  form.page = pageSize;
  getCourseList();
};

watch(
  () => userStore.$state.subjectID,
  async (newValue, oldValue) => {
    videodata.sid = userStore.$state.subjectID;
    form.sid = userStore.$state.subjectID;
    Id.value = userStore.$state.subjectID;
    try {
      if (userStore.$state.subjectID) {
        if (courselist.value == "1") {
          await VideoList();
        } else {
          await getCourseList();
        }
        postcatZsdlist();
      }
    } catch (error) {
      console.error("获取数据出错:", error);
    }
  },
  { immediate: true }
);
const postcatZsdlist = () => {
  // let id = ''
  // if(subjectID)
  postcatZsd({ id: Id.value }).then((res: any) => {
    myObject.value = res.list.zsd.map((item) => {
      const convert = (obj) => {
        const { sub, ...rest } = obj;
        if (sub) {
          return {
            children: sub.map(convert),
            ...rest,
          };
        }
        return rest;
      };
      return convert(item);
    });

    // res.list.zsd.forEach(item)
  });
};

// 查询按钮
const searchButtonClick = (e: any) => {
  videodata.keyword = keyword.value;
  VideoList();
};
onMounted(() => {
  // postcatZsdlist();
});
</script>
<style lang="less" scoped>
.namelist {
  background: #f7fbff;
  position: relative;
  width: 100%;
}

.measure-test {
  //   padding: 1.5rem;
  display: flex;
  //   height: 80%;
  justify-content: space-around;
  // flex-wrap: wrap;
  /* 允许子元素在必要时换行 */
  flex-wrap: wrap;
  /* 移除左右两侧的负边距 */
  //     margin-left: -10px;
  // margin-right: -10px;
}

.measure-test>* {
  /* 为子元素添加左右边距 */
  // margin-left: 24px;
  margin-right: 10px;
  /* 调整子元素的基础宽度 */
  // flex-basis: calc(16.666% - 24px);
  box-sizing: border-box;
}

/* 利用伪元素来调整布局 */
.measure-test::after {
  content: "";
  /* 让伪元素占据剩余空间 */
  flex: 1 1 calc(16.666% - 20px);
  visibility: hidden;
  // margin-left: 10px;
  margin-right: 10px;
  // visibility: hidden;s
}

// .measure-test::after {
// content: "";
// flex: auto;
//         }

.oval-search-button {
  display: inline-block;
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
}

.test-paper {
  width: 268px;
  height: 118px;
  padding: 20px;
  // margin-right: ;
  // margin-right: 24px;
  font-weight: 500;
  font-size: 16px;
  color: #03305c;
  margin-bottom: 15px;
  background: #ffffff;
  border-radius: 8px;
}

.start {
  //   margin-top: 45px;
  text-align: right;
  color: #0075ff;
  text-decoration: underline;
}

.coures-type {
  width: 100%;
  height: 100%;
  background-color: #fff;
  // line-height: 1px;
}

// 分页
.pagination {
  width: 550px;
  height: 30px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  // bottom: 20px;
  left: 30%;
}

.grid-dem {
  text-align: center;
  margin: 0 auto;
}

// 内容样式
.teplist {
  margin-top: 7px;
  width: 100%;
  height: 100%;
  padding: 1vw 1vw;
  background-color: #fff;
}

.teplistname {}

.spanlist {
  margin: 0 1vw;
  cursor: pointer;
}

.testVideoName {
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 隐藏超出内容 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  width: 100%;
}

.active {
  color: #0075ff;
  /* 点击后变色，可按需修改颜色 */
}

.knowledge {
  margin: 1vw 0;
}

.selectname {
  width: 4vw;
}

//头部样式
.measure {
  // width: 100%;
  height: 70px;
  background: #0075ff;
  border-radius: 8px;
  border-top: 1px solid #0075ff;
}

.measureBtn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 30px;
  margin-top: 10px;
}

.measureBtn span {
  color: #8d8d8d;
  font-size: 13px;
}

.measure-name {
  // width: 100%
  //   height: 70px;
  line-height: 70px;
  margin-top: 5px;
  padding: 0 1vw;
  background: #fff;
  border-radius: 8px;
  display: flex;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
}

.measure-namelist {
  display: flex;
  width: 10vw;
  justify-content: space-between;
  cursor: pointer;
  font-size: 1vw;

  .tapelist {
    // width: 5vw;
    position: relative;
    display: inline-block;
  }

  .tapelistname {
    // width: 5vw;
    color: #8393a3;
  }

  .tapelist::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20px;
    /* 调整下划线与文本的间距 */
    width: 100%;
    height: 2px;
    /* 加粗下划线，可根据需要调整 */
    background-color: #0075ff;
    box-shadow: 0 0 5px #0075ff;
    /* 添加阴影效果，可根据需要调整 */
  }
}

.inputwidth {
  width: 10vw;
}

.namelist-data {
  width: 100%;
  //  background-color: pink;
}

.namelisy-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  // margin-bottom: 1vw;
  // padding: 1vw 0;
  //  background-color: pink;
}

.namelisy {
  margin: 10px;
  width: calc(25% - 22px);
  padding-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px 8px 0px 0px;
  border: 1px solid #ededed;
  font-size: 1vw;
}

.namelisy-p {
  padding: 0vw 1vw 0;
  font-weight: 400;
  font-size: 0.8vw;
  color: #8393a3;
  width: 100%;
  line-height: 17px;
  // text-align: left;
  font-style: normal;
}

.study {
  display: flex;
  padding: 1vw 1vw 0 1vw;
  width: 90%;
  justify-content: space-between;
  font-size: 0.7vw;
  flex-direction: column;
}

.study-go {
  width: 4vw;
  height: 1.5vw;
  font-size: 0.7vw;
  text-align: center;
  cursor: pointer;
  line-height: 1.5vw;
  // color: #0075ff;
  border-radius: 14px;
  border: 1px solid #0075ff;
}

.curriculum {
  // width: 100%;
  height: 7vh;
  padding: 0 1vw;
  margin: 0 1vw;
  line-height: 7vh;
  display: flex;
  justify-content: space-between;
  background: #f7fbff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: #03305c;

  .curriclum-time {
    // line-height: 22px;
    text-align: left;
    font-style: normal;
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    white-space: nowrap;
    /* 不换行 */
  }
}

/* 隔行变色 */
.curriculum:nth-child(even) {
  background-color: #f7fbff;
}

.curriculum:nth-child(odd) {
  background-color: #ffffff;
}

.start-learning {
  // color: #0075ff;
  cursor: pointer;
  margin-top: 10px;
  // text-decoration: underline;
}

@media (max-width: 768px) {
  .phone_wrap {
    font-size: 12px;
  }

  .study-go {
    width: 15vw;
    height: 5vw;
    font-size: 3vw;
    text-align: center;
    line-height: 3vw;
    // color: #0075ff;
    border-radius: 14px;
    border: 1px solid #0075ff;
  }

  .testVideoName {
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏超出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    width: 100%;
    font-size: 4vw;
  }

  .tapelist {
    // width: 5vw;
    font-size: 3vw;
    position: relative;
    display: inline-block;
  }

  .study {
    display: flex;
    padding: 1vw 1vw 0 1vw;
    width: 90%;
    justify-content: space-between;
    font-size: 3vw;
  }

  .tapelistname {
    // width: 5vw;
    font-size: 3vw;
    color: #8393a3;
  }

  .namelisy-p {
    padding: 0vw 1vw 0;
    font-weight: 400;
    font-size: 3vw;
    color: #8393a3;
    width: 100%;
    line-height: 17px;
    font-style: normal;
  }

  .namelisy {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    // height: 330px;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #ededed;
    font-size: 1vw;
    margin: 10px 0px;

  }

  .measure-namelist {
    display: flex;
    width: 30vw;
    justify-content: space-between;
    font-size: 3vw;

    .tapelist {
      // width: 5vw;
      position: relative;
      display: inline-block;
    }

    .tapelist::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 20px;
      /* 调整下划线与文本的间距 */
      width: 100%;
      height: 2px;
      /* 加粗下划线，可根据需要调整 */
      background-color: #0075ff;
      box-shadow: 0 0 5px #0075ff;
      /* 添加阴影效果，可根据需要调整 */
    }
  }

  .inputwidth {
    width: 30vw;
  }
}
</style>
